<template>

      <el-container class="home-box">
        <el-header>
            <img src="../assets/images/logo.png" alt="">
            <div class="title">后台管理系统
                <el-button class="exit" @click="exit">退出</el-button>
            </div>
        </el-header>
        <el-container class="content">
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
      </el-container>
</template>

<script>
export default {
    data() {
      return {
       
      };
    },
    methods: {
     exit() {
        //  将session的值销毁
        sessionStorage.removeItem("token")
        // 编程时导航定位到login
        this.$router.push("/login")
     }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.home-box {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}
 .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    height: 60px;
    img {
        float: left;
    }
    .title {
        font-size: 30px;
        font-weight: 700;
        margin-top: 10px;
        .exit {
            float: right;
        }
    }
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    // height: 100%;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    // height: 100%;
    // line-height: 160px;
  }
</style>
</style>
